<template>
	<el-container>
		<el-header>
			<div class="right-panel-search">
				<el-input v-model="search.contract_no" placeholder="请输入合同单号" clearable @change="upsearch"/>
				<el-input v-model="search.keyword" placeholder="请输入工厂货号/SKC" clearable @change="upsearch"/>
				<el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChanges" stripe remoteSort remoteFilter border :params="query" show-summary>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column fixed label="合同号" align="center" width="160" sortable>
					<template #default="{row}">
						<div>{{ row.contract_no }}</div>
						<div>{{ row.create_time }}</div>
					</template>
				</el-table-column>
				<el-table-column label="商品信息" fixed prop="goods" align="center" width="300">
					<template #default="{row}">
						<div class="shopInfo" v-if="row.goods">
							<el-image class="img" :src="row.goods.goods_image" :preview-src-list="row.goods.goods_image_item" :initial-index="0" fit="cover"
									  preview-teleported="true" hide-on-click-modal/>
							<div class="right">
								<div>工厂货号：{{ row.factory_number }}</div>
								<div>批次号：{{ row.batch_number }}</div>
								<div>SKC：{{ row.skc }}</div>
								<div>商品品牌：{{ row.brand_name }}</div>
								<div>客户：{{ row.custom_name }}</div>
								<div>颜色：{{ row.goods.colour }}</div>
								<div v-if="row.sizeCate">商品类别：{{ row.sizeCate.title }}</div>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed label="尺码" align="center">
					<template #default="{row}">
						<div v-for="(item,index) in row.orderDetail" :key="index">
							{{ item.goods_size }}
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed label="此单发织数量" prop="total_weaving_count" align="center" width="100">
					<template #default="{row}">
						<div v-for="(item,index) in row.orderDetail" :key="index">
							{{ item.weaving_num }}
						</div>
					</template>
				</el-table-column>
				<el-table-column fixed label="已收数量" prop="total_complete_count" align="center" width="100">
					<template #default="{row}">
						<div v-for="(item,index) in row.orderDetail" :key="index">
							{{ item.complete_num }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="订单标签" align="center" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.order_label==1" type="danger">加急</el-tag>
						<el-tag v-else type="success">正常</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="针种" prop="needle_seed_title" align="center" width="100"></el-table-column>
				<el-table-column label="毛种" prop="wool_seed" align="center" width="100"></el-table-column>
				<el-table-column label="生产交期" prop="due_date" align="center" width="150" sortable></el-table-column>
				<el-table-column label="发织日期" prop="contract_date" align="center" width="150" sortable></el-table-column>
				<el-table-column label="工序" align="center" width="100">
                    <template #default="{row}">
						<div>{{row.produce_process_name}}</div>
					</template>
                </el-table-column>
				<!-- <el-table-column label="承制人" prop="apply_name" align="center" width="100" sortable></el-table-column> -->
				<el-table-column label="承制人" align="center" width="100" sortable  column-key="filterApply" :filters="chengFilters">
					<template #default="{row}">
						<div>{{row.apply_name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="制单人" align="center" width="100" column-key="filterCreate" :filters="zhiFilters">
                    <template #default="{row}">
						<div>{{row.creator_name}}</div>
					</template>
                </el-table-column>
				<el-table-column label="单价" prop="price" align="center" width="100"></el-table-column>
				<el-table-column label="单位" prop="unit_name" align="center" width="100"></el-table-column>
				<el-table-column label="完工" align="center" width="100">
					<template #default="{row}">
						<el-tag v-if="row.is_completed==1" type="success">是</el-tag>
						<el-tag v-else type="danger">否</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="120">
					<template #default="scope">
						<el-button-group style="display:flex;flex-direction:column">
							<!-- <div>
								<sc-status-indicator type="danger" v-if="scope.row.contract_print==0"></sc-status-indicator>
								<el-button text type="primary" size="small" @click="contPrint(scope.row, scope.$index)" v-auth="'loomcontract.contract'">打印合同</el-button>
							</div> -->
							<!-- <div>
								<sc-status-indicator type="danger" v-if="scope.row.qrcode_print==0"></sc-status-indicator>
								<el-button text type="primary" size="small" @click="print(scope.row, scope.$index)" v-auth="'loomcontract.print'">打印条码</el-button>
							</div> -->
							<el-popconfirm title="确定标为完工吗？" @confirm="completed(scope.row)">
								<template #reference>
									<el-button text type="primary" size="small" v-auth="'loomcontract.completed'">标为完工</el-button>
								</template>
							</el-popconfirm>
							<!-- <el-button text type="primary" size="small" @click="repair(scope.row, scope.$index)" v-auth="'loomcontract.repairMarte'">补毛</el-button>
							<el-button text type="primary" size="small" @click="refund(scope.row, scope.$index)" v-auth="'loomcontract.retrunMater'">退毛</el-button> -->
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>
<script>

export default {
	name: 'user',
	data() {
		return {
			dialog: {
				save: false,
			},
			group: [],
			apiObj: this.$API.produce.contract.viewContract,
			query: {
				process_id: 3,
                is_local:1,
			},
			selection: [],
			needleList: [],//针种
			search: {
				time_range: null,
				keyword: null,
				supplier_id: null,
				creator: null,
				order_no: null,
			},
			produce_no: "",
			apply: [],
			applyList: [],
			nameFilters: [],
		}
	},
	mounted() {
		this.getApply()
	},
	methods: {
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
		selectionChanges(selection) {
			this.selection = selection;
		},
		//所有针种
		async getNeedle() {
			var res = await this.$API.all.needle.get();
			this.needleList = res.data;
		},
		async getApply() {
			var res = await this.$API.all.Apply.get({type: 1});
			let a = []
			res.data.map(item => {
				a.push({
					text: item.apply_name,
					value: item.apply_name,
				})
			})
			this.nameFilters = a
		},
		filterHandler(value, row, column) {
			const property = column['property']
			return row[property] === value
		}
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
